<template>
    <div class="page">
      <div>
        <Menu mode="horizontal" active-name="transAll" accordion @on-select="handleSelect">
          <MenuItem name="transAll"><Icon type="md-menu" />全部</MenuItem>
          <MenuItem name="transSuccess"><Icon type="md-checkmark-circle-outline" />已完成</MenuItem>
          <MenuItem name="transQueue"><Icon type="md-list" />排队中</MenuItem>
          <MenuItem name="transcoding"><Icon type="md-cloud-circle" />正在转码</MenuItem>
          <MenuItem name="transFail"><Icon type="md-close-circle" />转码失败</MenuItem>
        </Menu>
      </div>
      <div>
        <List style="width: 900px;margin-top: 20px;padding: 30px;">
          <ListItem v-for="item in respTaskData.data" :key="item.title" class="task-list-item">
            <ListItemMeta :title="item.title" style="margin: 5px;"/>
            <template>
              <Progress :percent=item.process :stroke-width="20" status="active" :stroke-color="['#108ee9', '#87d068']" text-inside style="width: 300px;margin: 10px"/>
              <Icon type="ios-time" /><span>{{item.createTime}}</span>
            </template>
            <template slot="action">
              <li style="margin: 5px">
                <Button type="error" size="small" @click=""><Icon type="ios-trash" />删除</Button>
              </li>
            </template>
          </ListItem>
        </List>
        <Page :total="respTaskData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
              @on-page-size-change="getPageCount" style="text-align: center"></Page>
      </div>
    </div>
</template>

<script>
    import TaskService from "../services/TaskService";
    import cookies from 'js-cookie';

    export default {
        name: "VideoTransProgressComponent",
        data(){
          return {
            taskSerivce: null,
            respTaskData:{data:[], total:null},
            timer:null,
            formData:{
              currentPage:0,
              pageCount:10,
              state:-2
            }
          }
        },
        created(){
            this.init();
        },
        beforeDestroy(){
          clearInterval(this.timer);
          this.timer = null;
        },
        methods:{
            init(){
              this.taskSerivce = new TaskService(this);
              this.searchTasks(this.formData.currentPage,this.formData.pageCount);
              this.timer = setInterval(this.intervalPlay, 500);
            },
            intervalPlay(){
              this.searchTasks(this.formData.currentPage,this.formData.pageCount);
            },
            searchTasks(currentPage, pageCount){
              let params = {
                "userId": cookies.get("UserId"),
                "currentPage": currentPage + "",
                "pageCount": pageCount + "",
                "state":this.formData.state
              };
              this.taskSerivce.searchTasks(params, function(_this, data){
                _this.respTaskData.data = data.data;
                _this.respTaskData.total = data.page.total;
              })
            },
            handleSelect(name){
              if(name == "transAll")this.formData.state = -2;
              if(name == "transQueue")this.formData.state = 2;
              if(name == "transSuccess")this.formData.state = 0;
              if(name == "transFail")this.formData.state = -1;
              if(name == "transcoding")this.formData.state = 1;
            },
            getCurrentPage(num){
              this.formData.currentPage = num-1;
              this.searchVideo(this.formData.currentPage, this.formData.pageCount);
            },
            getPageCount(pageSize){
              this.formData.pageCount = pageSize;
              this.searchVideo(this.formData.currentPage, this.formData.pageCount);
            },
        }
    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
